<template>
  <transition name="translate">
    <div class="about-wrap">
      <common-back :content="headerTitle"
                   class="header"></common-back>
       <common-loading v-show="showLoading"></common-loading>
      <div class="content"
           v-html="content" v-if="!showLoading"></div>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonLoading from 'common/loading/loading'
import { mapState } from 'vuex'
export default {
  name: 'about',
  components: {
    CommonBack,
    CommonLoading
  },
  data () {
    return {
      headerTitle: '关于我们',
      content: '',
      showLoading: true
    }
  },
  created () {
    this.getState()
  },
  methods: {
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getAbout()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getAbout () {
      this.$api.person.about()
        .then(this.getAboutSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getAboutSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.content = data.aboutus
      }
    }
  },
  computed: {
    ...mapState(['person', 'contact', 'bank'])
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.about-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 30
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 20px

  .content
    width 100%
    padding-top 20px
    padding-bottom 20px
    padding-left 32px
    padding-right 32px
    border-radius 24px
    box-sizing border-box
    font-size $shop_name
    font-weight 400
    color $id_input
    line-height 50px
    background-color $common_bgc
    word-break break-all

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
